<template>
  <div>
    <div v-if="port != 'client'" id="components-form-demo-advanced-search">
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          订单编号：<a-input
          :maxLength="128"
            v-model="searchData.waybillCode"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          客户编号：
          <a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.tenantId"
          >
            <a-select-option
              :value="item.tenantId"
              v-for="item in accArray"
              :key="item.id"
              :titles="item.title"
            >
              {{ item.companyName + "/" + item.tenantId }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          创建时间：<a-range-picker
            v-model="acTime"
            @change="onStartDateChange"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          <a-button
            type="primary"
            class="searchBtn"
            @click="
              () => {
                getTableList();
              }
            "
          >
            查询
          </a-button>
          <a-button
            style="margin: 0 10px"
            type="primary"
            class="searchBtn"
            @click="resetSearch"
          >
            重置
          </a-button>
        </a-col>
      </a-row>
    </div>
    <div v-if="port === 'client'" id="components-form-demo-advanced-search">
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          订单编号：<a-input
          :maxLength="128"
            v-model="searchData.waybillCode"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          创建时间：<a-range-picker
            v-model="acTime"
            @change="onStartDateChange"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          <a-button
            type="primary"
            class="searchBtn"
            @click="
              () => {
                getTableList();
              }
            "
          >
            查询
          </a-button>
          <a-button
            style="margin: 0 10px"
            type="primary"
            class="searchBtn"
            @click="resetSearch"
          >
            重置
          </a-button>
        </a-col>
        <a-col :span="6"> </a-col>
      </a-row>
    </div>
    <div class="btn" style="display: flex; margin-top: 10px">
      <div class="news">
        <a-button
          type="primary"
          class="blueBtn"
          @click="showModal"
          style="
            background: #66b1ff;
            color: #fff;
            border: none;
            margin-left: 8px;
            margin-right: 20px;
          "
        >
          创建订单
        </a-button>
      </div>
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1">
          <span slot="tab">
            <a-badge
              :count="stateCount === null ? 0 : stateCount.allWCount"
              :offset="[15, 0]"
              >所有运单
            </a-badge>
          </span>
          <BuyWaybillTable
            :port="port"
            :getTableList="getTableList"
            :tableList="tableList"
            v-if="tabKey === '1'"
          />
        </a-tab-pane>
        <a-tab-pane key="5">
          <span slot="tab">
            <a-badge
              :count="stateCount === null ? 0 : stateCount.notCount"
              :offset="[15, 0]"
              >未生成运单
            </a-badge>
          </span>
          <BuyWaybillTable
            :port="port"
            :getTableList="getTableList"
            :tableList="tableList"
            v-if="tabKey === '5'"
          />
        </a-tab-pane>
        <a-tab-pane key="15">
          <span slot="tab">
            <a-badge
              :count="stateCount === null ? 0 : stateCount.hasCount"
              :offset="[15, 0]"
              >已生成运单
            </a-badge>
          </span>
          <BuyWaybillTable
            :port="port"
            :getTableList="getTableList"
            :tableList="tableList"
            v-if="tabKey === '15'"
          />
        </a-tab-pane>
        <a-tab-pane key="45">
          <span slot="tab">
            <a-badge
              :count="
                stateCount === null ? 0: stateCount.deliveryCount
              "
              :offset="[15, 0]"
              >已发货运单
            </a-badge>
          </span>
          <BuyWaybillTable
            :port="port"
            :getTableList="getTableList"
            :tableList="tableList"
            v-if="tabKey === '45'"
          />
        </a-tab-pane>
      </a-tabs>
    </a-spin>

    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          :current="searchData.current"
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>

    <BuyWaybillModal
      :port="port"
      :accArray="accArray"
      :getTableList="getTableList"
      ref="BuyWaybillModal"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  pageWaybill,
  waybill_statecount,
} from "@/apis/system/BuyWaybill/BuyWaybill";
import BuyWaybillTable from "@/components/system/BuyWaybill/BuyWaybillTable.vue";
import BuyWaybillModal from "@/components/system/BuyWaybill/BuyWaybillModal.vue";
export default {
  props: ["port"],
  components: {
    BuyWaybillTable,
    BuyWaybillModal,
  },
  created() {
    this.getTableList();
  },
  data() {
    return {
      total: 1,
      spinning: false,
      acTime: null,
      searchData: {
        current: 1,
        size: 10,
        applyState: this.tabKey === "1" ? "" : this.tabKey,
        waybillCode: null,
        tenantId: null,
        startDate: null,
        endtDate: null,
      },
      tabKey: "1",
      tableList: [],
      stateCount: {},
    };
  },
  methods: {
    //显示模态框
    showModal() {
      this.$refs.BuyWaybillModal.showModal();
    },
    callback(key) {
      this.searchData.current = 1;
      if (key === "1") {
        this.searchData.applyState = "";
        this.getTableList();
      } else {
        this.searchData.applyState = key;
        this.getTableList();
      }
      this.tabKey = key;
    },
    //重置按钮
    resetSearch() {
      let current = this.searchData.current;
      let size = this.searchData.size;
      this.acTime = null;
      this.searchData = {
        current: current,
        size: size,
        applyState: this.tabKey === "1" ? "" : this.tabKey,
        waybillCode: null,
        tenantId: null,
        startDate: null,
        endtDate: null,
      };
      this.getTableList();
    },
    //时间查询
    onStartDateChange(date, dateString) {
      this.searchData.startDate = dateString[0];
      this.searchData.endtDate = dateString[1];
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getTableList();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getTableList();
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    async getTableList() {
      this.spinning = true;
      let { code, responseBody } = await pageWaybill(this.searchData);
      if (code === "200") {
        this.tableList = responseBody.records;
        this.total = responseBody.total * 1;
        this.spinning = false;
        this.getStateCount();
      }
    },
    //购买运单气泡
    async getStateCount() {
      let { code, responseBody } = await waybill_statecount();
      if (code === "200") {
        this.stateCount = responseBody[0]?null:responseBody[0];
      }
    },
  },
  computed: {
    ...mapState(["accArray"]),
  },
};
</script>

<style lang="less" scoped>
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
</style>